<template>
	<view class="page">
		<!-- 搜索框显示区域开始 -->
		<view class="search-box">
			<icon class="icon" type="search" size="20"></icon>
			<input class="text" @input="inputChange" placeholder="请输入名字查询" type="text" :value="apiInfo.userName" confirm-type="搜索" />
		</view>
		<!-- 搜索框显示区域结束 -->
		<scroll-view class="content-box" :class="{'radio-content-box': selectedType == 'radio'}" @scrolltolower="scrollPage" scroll-y>
			<view class="person-card-box" v-for="(item,index) in personList" :key="index"
				@click="selectedType == 'checkbox' ? checkboxChange(item,index) : radioChange(item,index)">
				<image class="radio-icon" v-if="!item.selected || item.selected == false" @
					src="/static/image/radio_icon.png" mode="aspectFit"></image>
				<image class="radio-icon" v-if="item.selected == true"
					src="/static/image/radio_selected_icon.png" mode="aspectFit"></image>
				<view class="card">
					<personnelCard :userinfo="item"></personnelCard>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-box" v-if="selectedType == 'radio'">
			<view class="confirm-button" @click="confirm">确认</view>
		</view>
		<view class="bottom-box" v-if="selectedType == 'checkbox'">
			<view class="confirm-button" @click="checkboxConfirm">确认</view>
		</view>
	</view>
</template>

<script>
	import personnelCard from '../component/personnelCard/index';
	import * as api from '@/utils/api.js';
	export default {
		components: {
			personnelCard,
		},
		data() {
			return {
				scrollType: true, // 是否允许滚动翻页
				apiInfo: { // api接口传参信息
					"currentPage": 1,
					"deleted": "0",
					"userName": ""
				},
				type:'', // 选择人员类型
				taskid:null, // 任务id
				checkboxSelected:[], // 多选选中项
				radioSelected:{},// 单选选中项
				pageInfo: {}, // api返回页码信息
				personList: [], // 人员列表
				identity: 'leader', // 选择人员身份（leader:负责人;participants:参与人）
				selectedType: 'checkbox', // 选择类型（checkbox,radio）
			}
		},
		onLoad(option) {
			if(option.taskid){
				this.taskid = option.taskid;
			}
			if (option.identity) {
				this.identity = option.identity;
			}
			if (option.selectedType) {
				this.selectedType = option.selectedType;
			}
			if(option.type){
				this.type = option.type;
			}
			this.initPersonal();
		},
		
		methods: {
			/**
			 * 滚动翻页触发事件
			 */
			scrollPage: function() {
				let scrollType = this.scrollType;
				let apiInfo = this.apiInfo;
				let pageInfo = this.pageInfo;
				if (scrollType == true && pageInfo.currentPage + 1 > pageInfo.totalPage) {
					scrollType = false;
					uni.showToast({
						title: '没有更多',
						icon: 'none',
						duration: 2000
					});
					this.scrollType = false;
				}
				if (scrollType == true) {
					apiInfo.currentPage += 1;
					this.initPersonal();
				}
			},
			inputChange:function(e){
				let apiInfo = this.apiInfo;
				if(apiInfo.userName != e.target.value){
					apiInfo.currentPage = 1;
					apiInfo.userName = e.target.value;
					this.personList = [];
					this.apiInfo = apiInfo;
					this.scrollType = true;
					this.initPersonal();
				}
			},
			/**
			 * 初始化成员列表
			 */
			initPersonal: function() {
				let that = this;
				let apiInfo = that.apiInfo;
				let personList = that.personList;
				let globalDataPersonList = getApp().globalData.personList;
				let selected = [];
				let radioSelected = that.radioSelected;
				let checkboxSelected = that.checkboxSelected;
				let identity = that.identity;
				api.employeeList(apiInfo).then(res => {
					for (let i = 0; i < res.data.result.length; i++) {
						if (identity == 'leader') {
							selected = globalDataPersonList.leader.filter(results => {
								return res.data.result[i].id == results.id;
							})

						} else if (identity == 'participants') {
							selected = globalDataPersonList.participants.filter(results => {
								return res.data.result[i].id == results.id;
							})
						}
						
						if (selected.length > 0) {
							selected = [];
							res.data.result[i].selected = true;

						} else {
							res.data.result[i].selected = false;
						}
						if(radioSelected.id == res.data.result[i].id){
							res.data.result[i].selected = true;
						}
						console.log('checkboxSelected',checkboxSelected);
						if(res.data.result[i].selected == true){
							checkboxSelected.push(res.data.result[i]);
						}
						// checkboxSelected.push(res.data.result[i]);
						// checkboxSelected.forEach(result=>{
						// 	if(result.id == res.data.result[i].id){
						// 		res.data.result[i].selected = true;
						// 	}
						// })
					}
					personList.push.apply(personList, res.data.result);
					console.log(personList);
					that.pageInfo = res.data.page;
					that.personList = personList;
				})
			},
			confirm:function(){
				let that = this;
				let taskid = that.taskid;
				let selectedType = that.selectedType;
				let radioSelected = that.radioSelected;
				if(selectedType == 'radio' && taskid != null && this.type !='project'){
					getApp().globalData.personList.assignment = radioSelected;
					api.taskRedeploy({"id":taskid,"userId":radioSelected.id,"remark":""}).then(res=>{
						getApp().globalData.refreshPage = 'detail';
						uni.navigateBack();
					})
				}else if(selectedType == 'radio'){
					getApp().globalData.personList.assignment = radioSelected;
					uni.navigateBack();
				}
			},
			/**
			 * 单选框触发事件
			 */
			radioChange:function(data,index){
				let personList = this.personList;
				for(let i = 0; i < personList.length;i++){
					personList[i].selected = false;
				}
				personList[index].selected = true;
				this.radioSelected = personList[index];
			},
			/**
			 * 多选框点击触发事件
			 */
			checkboxChange: function(data, index) {
				let checkboxSelected = this.checkboxSelected;
				let inx = null;
				for(let i = 0 ; i < checkboxSelected.length;i++){
					if(checkboxSelected[i].id  == data.id){
						inx = i;
					}
				}
				if(inx == null){
					checkboxSelected.push(data);
				}else{
					checkboxSelected.splice(inx, 1);
				}
				if (data.selected == false) {
					data.selected = true;
				} else if (data.selected == true) {
					data.selected = false;
				}
				this.checkboxSelected = checkboxSelected;
				this.$set(this.personList, index, data);
				console.log('radio', getApp().globalData.personList);
			},
			
			checkboxConfirm:function(){
				let identity = this.identity;
				let data = this.checkboxSelected;
				console.log(data);
				let globalDatapersonList = getApp().globalData.personList;
				if(identity == 'leader'){
					globalDatapersonList.leader = data;
				}else if(identity == 'participants'){
					globalDatapersonList.participants = data;
				}
				getApp().globalData.personList = globalDatapersonList;
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f6f6f6;
	}

	.search-box {
		display: flex;
		background-color: white;
		width: calc(100% - 50rpx);
		margin: 20rpx auto;
		height: 70rpx;
		border-radius: 16rpx;
		overflow: hidden;
		-moz-box-shadow: -1rpx 1rpx 15rpx #333333;
		-webkit-box-shadow: -1rpx 1rpx 15rpx #333333;
		box-shadow: -1rpx 1rpx 15rpx #333333;

		.icon {
			padding: 16rpx;
		}

		.text {
			flex: 1;
			height: 70rpx;
		}
	}

	.content-box {
		white-space: nowrap;
		height: calc(100vh - 110rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 110rpx - env(safe-area-inset-bottom));

		.person-card-box {
			background-color: white;
			display: flex;
			box-sizing: border-box;
			padding: 0 25rpx;
			width: calc(100% - 40rpx);
			margin: 0 auto;
			border-bottom: 2rpx solid #fbfbfb;
			// border-top: 2rpx solid red;
			// border-bottom: 2rpx solid red;
			height: 100rpx;

			.radio-icon {
				width: 40rpx;
				height: 40rpx;
				margin-top: 30rpx;
				margin-right: 20rpx;
			}

			.card {
				margin-top: 20rpx;
			}
		}
	}
	.radio-content-box{
		height: calc(100vh - 190rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 190rpx - env(safe-area-inset-bottom));
	}
	.bottom-box{
		position: fixed;
		width: 100%;
		background-color: #efefef;
		bottom:0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
	.confirm-button{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: white;
		text-align: center;
		background-color: #33ad84;
	}
	}
</style>
